#@layout()
#define main()
	<div>
		<div style="margin:5px 0;border-bottom:1px solid #aaa;">
			<span class="layui-breadcrumb">
				<a href="#">系统运行情况</a>
				<a><cite>系统运行情况</cite></a>
			</span>
        </div>
        <table class="layui-table" lay-even="">
			<colgroup>
				<col width="90">
				<col width="100">
				<col width="100">
				<col width="200">
			</colgroup>
			<tr id="first_tr">
				<th>序号</th>
				<th>名称</th>
				<th>值</th>
				<th>说明</th>
			</tr>
			#for(x : lists)
			<tr>
				<td >#(for.index+1)</td>
				<td >#(x.name)</td>
				<td >#(x.value)</td>
				<td >#(x.bz)</td>
			</tr>
			#end
		</table>
		<form id="form1" class="layui-form" action="xpRunState" method="post" style="padding:0px 0 0 20px;">
			<div class="layui-form-item">
				<div class="layui-inline col-12 col-sm-24"> 
					<label class="layui-form-label col-6 col-sm-6">日期</label>
					<div class="layui-input-inline col-18 col-sm-16">
						<input type="text" id="date" name="date" value="#(date)" lay-verify="" placeholder="yyyy-mm-dd" autocomplete="off" class="layui-input">
					</div>
				</div>			
				<div class="layui-inline">
				<button class="layui-btn" lay-submit="" lay-filter="demo1">刷新</button>
				</div>
			</div>
		</form>
		<div id="chartNum" style="margin: 15px 15px;overflow: auto;"></div>
		<div id="chartUseTime" style="margin: 15px 15px;overflow: auto;"></div>
		<div id="chartUseTimePer" style="margin: 15px 15px;overflow: auto;"></div>
		<script src="xpsoft/common/highcharts/highcharts.js"></script>
		<script src="xpsoft/common/highcharts/modules/exporting.js"></script>
		<script type="text/javascript">
		var chart;
		$(document).ready(function() {
			chart = new Highcharts.Chart({
				chart: {
					renderTo: 'chartNum',
					defaultSeriesType: 'line'
				},
				title: {
					text: '每10秒处理任务数'
				},
				xAxis: {
					categories: #(labels),
					title: {
						text: 'Time'
					}
				},
				yAxis: {
					title: {
						text: '任务数'
					}
				},
				tooltip: {
					//enabled: false,
					formatter: function() {
						return '<b>'+ this.series.name +'</b><br/>'+
							this.x +': '+ this.y;
					}
				},
				plotOptions: {
					line: {
						dataLabels: {
							enabled: true
						}
					}
				},
				credits:false,
				series: [{
					name: '每10秒处理任务数',
					data: #(num)
					},
					{
						name: '每10秒处理任务数所用时间大于50毫秒次数',
						data: #(num50)
					}
				]
			});
			
			chart = new Highcharts.Chart({
				chart: {
					renderTo: 'chartUseTime',
					defaultSeriesType: 'line'
				},
				title: {
					text: '每10秒处理任务数所用时间和(毫秒)'
				},
				xAxis: {
					categories: #(labels),
					title: {
						text: 'Time'
					}
				},
				yAxis: {
					title: {
						text: '时间和'
					}
				},
				tooltip: {
					//enabled: false,
					formatter: function() {
						return '<b>'+ this.series.name +'</b><br/>'+
							this.x +': '+ this.y;
					}
				},
				plotOptions: {
					line: {
						dataLabels: {
							enabled: true
						}
					}
				},
				credits:false,
				series: [{
					name: '每10秒处理任务数所用时间和(毫秒)',
					data: #(sumTime)
				}]
			});
			chart = new Highcharts.Chart({
				chart: {
					renderTo: 'chartUseTimePer',
					defaultSeriesType: 'line'
				},
				title: {
					text: '每10秒处理任务数所用时间平均值(毫秒)'
				},
				xAxis: {
					categories: #(labels),
					title: {
						text: 'Time'
					}
				},
				yAxis: {
					title: {
						text: '时间'
					}
				},
				tooltip: {
					//enabled: false,
					formatter: function() {
						return '<b>'+ this.series.name +'</b><br/>'+
							this.x +': '+ this.y;
					}
				},
				plotOptions: {
					line: {
						dataLabels: {
							enabled: true
						}
					}
				},
				credits:false,
				series: [{
					name: '每10秒处理任务数所用时间平均值(毫秒)',
					data: #(sumTimePer)
				}]
			});
		});
		layui.use(['form', 'laydate'], function(){
			var form = layui.form
			,layer = layui.layer
			,laydate = layui.laydate;
			laydate.render({
			    elem: '#date' //指定元素
		  	});
		});
		</script>
		
	</div>
#end